<template>
    <div class="ms-doc">
        <h3>{{title}}</h3>
        <article>
            <p v-for="(item,k) in note" :key="k"><Icon type="md-arrow-dropright" /> {{item}}</p>
        </article>
    </div>
</template>

<script>
    export default {
        props: ['title','note'],
        data(){
            return {}
        }
    }
</script>

<style scoped>
    .ms-doc{
        width:100%;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
        margin-bottom: 20px;
    }
    .ms-doc h3{
        padding: 9px 10px 10px;
        margin: 0;
        font-size: 14px;
        line-height: 17px;
        background-color: #f5f5f5;
        border: 1px solid #d8d8d8;
        border-bottom: 0;
        border-radius: 3px 3px 0 0;
    }
    .ms-doc article{
        padding: 20px;
        word-wrap: break-word;
        background-color: #fff;
        border: 1px solid #ddd;
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
    }
    .ms-doc article p{
        line-height: 2;
    }
    .ms-doc article .el-checkbox{
        margin-bottom: 5px;
    }
</style>